import { Upload, Icon, message } from 'antd';
import React from 'react';
import BaseComponent from '@/components/BaseComponent';
import { connect } from 'dva';
const { Dragger } = Upload;
@connect(({ user, detaileddatareporting, loading }) => ({
  currentUser: user.currentUser,
  isRunning: loading.effects['detaileddatareporting/execFileParse'],
}))
export default class ImageDragger extends BaseComponent {
  constructor(props) {
    super(props);
    this.state = {
      fileList: [],
    };
  }
  handleOnUploadChange = info => {
    const { status } = info.file;
    if (status !== 'uploading') {
      // 上传中
    }
    if (status === 'done') {
      const response = info.file.response;

      const { fileList } = this.state;
      const obj = fileList.find(each => each.name == info.file.name);
      //上传完成
      if (obj) {
        obj.isUploading = false;
        const { data } = response;
        if (data) {
          obj.fileId = data.fileId;
          obj.key = this.generateId();
        }
      }
      this.setState({
        fileList: [...fileList],
      });

      // console.log(`${info.file.name} file uploaded successfully.`);
    } else if (status === 'error') {
      this.errorMessage(`${info.file.name} 上传失败`);
      // console.log(`${info.file.name} file upload failed.`);
    }
  };

  /**
   * excel文件上传前的回调
   * @param {*} file
   * @param {*} fileList
   */
  handleBeforeUpload = (file, fileList) => {
    const { type } = file;
    if (type != 'image/jpeg' && type != 'image/png' && type != 'application/pdf') {
      file.status = 'error';
      file.response = '只支持上传jpg/png/pdf格式的文件';
      return false;
    } else {
      const { fileList } = this.state;
      const obj = {
        name: file.name,
        type: file.type,
        isUploading: true,
      };
      fileList.push(obj);
      this.setState({ fileList });
      return true;
    }
  };

  render() {
    const props = {
      name: 'file',
      multiple: true,
      action: `/api/file/file/uploadFile4CerDetailReport?user=${this.props.currentUser.id}`,
      accept: '.jpg,.jpeg,.png,.pdf',
      headers: {
        authorization: 'authorization-text',
      },
      showUploadList: false,
      onChange: this.handleOnUploadChange,
      beforeUpload: this.handleBeforeUpload,
    };
    return (
      <Dragger {...props}>
        <p className="ant-upload-drag-icon">
          <Icon type="inbox" />
        </p>
        <p className="ant-upload-text">Click or drag file to this area to upload</p>
        <p className="ant-upload-hint">
          Support for a single or bulk upload. Strictly prohibit from uploading company data or
          other band files
        </p>
      </Dragger>
    );
  }
}
